14 - Modèle de boîte

Types d'éléments

En HTML tous les éléments ont un de ces 3 types : block, inline ou inline-block.

Type block

Les types "block" sont des éléments qui prennent toute la largeur possible de leur parent et ne peuvent pas être mis côte-à-côte avec d'autres éléments. Par exemple les titres <h1></h1> à <h6></h6> et la balise <p></p> sont des éléments de type block.

Il existe aussi un type block générique : la balise <div></div> qui ne possède aucune signification sémantique et qui sert uniquement à servir de "boîte de rangement".

Les blocks peuvent être redimensionnés et posséder une marge au dessus et en dessous.

Type inline

Les types "inline" sont des éléments qui restent dans leur ligne actuelle et qui font la taille de leur contenu. Par exemple les balises <strong></strong> et <i></i> sont des éléments de type inline

Attention : les éléments de type inline ne peuvent pas contenir d'éléments de type block !

Il existe aussi un type inline générique : la balise <span></span> qui ne possède aucune signification sémantique et qui sert uniquement à cibler un bout de texte en particulier pour le styliser par exemple :

            
                /* styles.css */
                .redtext{
                    color: red;
                }

            
        

            

                <!-- index.html-->
                <p>
                    Dans cette phrase, <span class="red-text">une partie seulement est sélectionné</span> grâce à la balise span.
                </p>

            
        

Les inlines ne peuvent pas être redimensionnés et ne peuvent pas posséder une marge au dessus et en dessous.

Type inline-block

Les éléments de type "inline-block" sont hybrides : comme les inlines ils prennent la largeur de leur contenu et restent sur la même ligne mais ils peuvent être redimensionnés et posséder une marge au dessus et en dessous comme des blocks.Par exemple, les balises <button>Un bouton</button> sont des inline-blocks.

Changer le type d'un élément

Si besoin, on peut changer le type d'un élément grâce à la propriété CSS "display". Exemple d'un paragraphe qui se comportera comme un type inline :

            

                /* styles.css */
                .test{
                    display: inline;
                }

            
        

            

                <!-- index.html-->
                <p>Ce paragraphe est un block</p>
                <p class="test">Ce paragraphe est un inline</p>

            
        

Modèle de boîte

Le modèle de boîte consiste à considérer qu'en HTML tous élément est inclus dans une boîte (dans une div par exemple).

Chaque boîte possède des propriétés qui peuvent être changées :

• Une dimension (une largeur et une hauteur)

                      
  
                          /* l'élément aura une largeur de 250 pixels et une hauteur de 600px */
                          .test{
                              width: 250px;
                              height: 600px;
                          }
  
                      
                  

                      
  
                          /* l'élément occupera la moitié de la largeur de son parent */
                          .test{
                              width: 50%;
                          }
  
                      
                  

• Une marge extérieure

                      
  
                          /* Appliquera une marge de 50 pixels tout autour de l'élément */
                          .test{
                              margin: 50px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 50 pixels en haut et en bas puis une marge de 25 pixels à gauche et à droite de l'élément */
                          .test{
                              margin: 50px 25px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 30 pixels en haut, 50 pixels à gauche et à droite puis 25 pixels en bas de l'élément */
                          .test{
                              margin: 30px 50px 25px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 5 pixels en haut, 10 pixels à droite, 15 pixels en bas puis 20 pixels à gauche de l'élément */
                          .test{
                              margin: 5px 10px 15px 20px;
                          }
  
                      
                  

• Une marge intérieure

                      
  
                          /* Appliquera une marge de 50 pixels tout autour de l'élément */
                          .test{
                              padding: 50px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 50 pixels en haut et en bas puis une marge de 25 pixels à gauche et à droite de l'élément */
                          .test{
                              padding: 50px 25px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 30 pixels en haut, 50 pixels à gauche et à droite puis 25 pixels en bas de l'élément */
                          .test{
                              padding: 30px 50px 25px;
                          }
  
                      
                  

                      
  
                          /* Appliquera une marge de 5 pixels en haut, 10 pixels à droite, 15 pixels en bas puis 20 pixels à gauche de l'élément */
                          .test{
                              padding: 5px 10px 15px 20px;
                          }
  
                      
                  

• Une bordure (située entre la marge intérieure et extérieure de l'élément)

                      
  
                          /* Appliquera une bordure noire de 5 pixels d'épaisseur de type solid */
                          .test{
                              border: 5px solid black;
                          }
  
                      
                  

                      
  
                          /* Supprime toute bordure de l'élément */
                          .test{
                              border: none;
                          }
  
                      
                  

  Il existe plusieurs types de bordure : solid, dotted, dashed, double, groove, ridge, inset et outset

                      
  
                          /* Appliquera une bordure seulement à gauche de l'élément (marche aussi avec right, bottom et top) */
                          .test{
                              border-left: 5px solid black;
                          }
  
                      
                  

                      
  
                          /* Permet d'arrondir les 4 angles de l'élément */
                          .test{
                              border-radius: 25px;
                          }
  
                      
                  

• Un type de modèle de boîte

  Par défaut tous les éléments ont le type de modèle de boîte "content-box" : quand on donne une taille à un élément (par exemple 200px de large), la taille finale de cet élément sera égale à sa taille initiale + la largeur de ses bordures + la largeur de ses marges intérieures.

  Il existe un autre type de modèle de boîte : "border-box". Avec ce type de modèle, quand on donne une taille à un élément (par exemple 200px de large), la taille finale de cet élément sera forcément 200px. Les marges et bordures seront comptées dans la taille définies.

                      
  
                          /* Dans cet exemple, la largeur définitive totale de l'élément sera 200 + 2x20 + 2x2 = 244 pixels de large */
                          .test{
                              width: 200px
                              padding: 20px
                              border: 2px solid black;
                          }
  
  
                          /* Dans cet autre exemple, la largeur définitive totale de l'élément sera 200 pixels de large */
                          /* (les marges et bordures sont comptées dans la taille définie avec le modèle border-box) */
                          .test2{
                              box-sizing: border-box;
                              width: 200px
                              padding: 20px
                              border: 2px solid black;
                          }
  
                      
                  

• Une ombre

  Comme pour les textes, on peut appliquer une ombre sur une boîte d'un élément avec la propriété CSS "box-shadow" :

                      
  
                          /* Applique une ombre sur la boîte de cet élément */
                          .test{
                              box-shadow: 7px 7px 5px 0px red;
                          }
  
                      
                  

  Petit générateur d'ombre : https://css3gen.com/box-shadow/

• Une taille minimum/maximum

                      
  
                          /* Cet élément aura une dimension minimum de 250px de large et 400px de haut */
                          .test{
                              min-width: 250px;
                              min-height: 400px
                          }
  
                      
                  

                      
  
                          /* Cet élément aura une dimension maximum de 1000px de large et 1400px de haut */
                          .test{
                              max-width: 1000px;
                              max-height: 1400px;
                          }
  
                      
                  

Centrer un block dans son parent

Pour centrer un élément de type "block" dans son parent, il faut sélectionner cet élément et lui appliquer la propriété "margin" en "auto" :

            

                /* Cet élément block sera centré dans son parent */
                .block{
                    width: 100px;
                    margin: auto;
                }

            
        

            

                <div>
                    <div class="block">lorem ipsum</div>
                </div>

            
        

Faire disparaître un élément

Grâce à la propriété "display", on peut aussi faire complètement disparaître un élément visuellement :

            

                /* Cet élément n'apparaîtra pas à l'écran */
                .test{
                    display: none;
                }